<!--
author:        hejiyang <silentmanager@163.com>
date:          2024-11-13 16:44:36
component:     marking
Copyright © YourCompanyName All rights reserved
标记客户
-->
<template>
  <el-dialog v-model="isVisible" title="标记客户" width="600px" @update:visible="handleClose">
    <el-form label-width="auto">
      <el-form-item label="标记客户类型">
        <el-select v-model="tag" placeholder="请选择标记客户类型" style="width: 100%">
          <el-option
            v-for="item in tagOptions"
            :key="item.tag"
            :label="item.name"
            :value="item.tag"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" :loading="loading" @click="handleSave">标记</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { tagListCustomer, updateTagCustomer } from '@/api/customer'
import { ref, defineExpose } from 'vue'
const message = useMessage()
interface Props {
  selectId: number[]
}
const emit = defineEmits<{
  (e: 'success'): void // 添加 success 事件
}>()
const props = defineProps<Props>()
// ----------------------------- 表单 -----------------------------
const tag = ref<string>('')
const tagOptions = ref<
  {
    name: string
    tag: string
  }[]
>([])

const getTagOptions = async () => {
  try {
    const res = await tagListCustomer()
    tagOptions.value = res
  } catch (e) {
    console.error(e)
  }
}
onMounted(() => {
  getTagOptions()
})
// ----------------------------- 抽屉状态 -----------------------------
const loading = ref(false)
const isVisible = ref(false)
// 暴露控制弹窗的方法
defineExpose({
  open() {
    isVisible.value = true
  },
  close() {
    isVisible.value = false
  }
})
const handleClose = () => {
  isVisible.value = false
}
const handleSave = async () => {
  loading.value = true
  try {
    const res = await updateTagCustomer({
      ids: props.selectId.join(','),
      tag: tag.value
    })
    if (res.code === 0) {
      emit('success')
      handleClose()
      message.success('标记成功')
    }
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}
</script>
